<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <c:set var="title" value="质量控制"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-size: .875rem;
        }
        
        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 48px 0 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
        }
        
        .sidebar-sticky {
            position: relative;
            top: 0;
            height: calc(100vh - 48px);
            padding-top: .5rem;
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <%@ include file="../common/header.jsp" %>

    <div class="main-content">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">质量控制</h1>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addQualityCheckModal">
                <i class="fa-solid fa-plus-circle"></i> 添加质检记录
            </button>
        </div>

        <!-- 质量概览 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">本月质检数</h5>
                        <p class="card-text display-6">${monthlyChecks}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">合格率</h5>
                        <p class="card-text display-6">${passRate}%</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 质量趋势图表 -->
<%--        <div class="row mb-4">--%>
<%--            <div class="col-md-6">--%>
<%--                <div class="card">--%>
<%--                    <div class="card-body">--%>
<%--                        <h5 class="card-title">合格率趋势</h5>--%>
<%--                        <canvas id="passRateChart"></canvas>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>

        <!-- 质检筛选表单 -->
        <form class="row g-3 mb-3" id="qualityFilterForm" method="get" action="">
            <div class="col-md-3">
                <label class="form-label">批次编号</label>
                <select class="form-select" name="batchNo">
                    <option value="">全部</option>
                    <c:forEach items="${batchList}" var="batch">
                        <option value="${batch.batchNo}" <c:if test="${param.batchNo == batch.batchNo}">selected</c:if>>${batch.batchNo}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">检验类型</label>
                <select class="form-select" name="inspectType">
                    <option value="">全部</option>
                    <c:forEach items="${inspectTypeList}" var="type">
                        <option value="${type}" <c:if test="${param.inspectType == type}">selected</c:if>>${type}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">检验时间（起）</label>
                <input type="datetime-local" class="form-control" name="startTime" value="${param.startTime}">
            </div>
            <div class="col-md-3">
                <label class="form-label">检验时间（止）</label>
                <input type="datetime-local" class="form-control" name="endTime" value="${param.endTime}">
            </div>
            <div class="col-md-12 text-end">
                <button type="submit" class="btn btn-primary">筛选</button>
                <a href="${pageContext.request.contextPath}/processing/quality_control" class="btn btn-secondary">重置</a>
            </div>
        </form>

        <!-- 质检记录列表 -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">质检记录</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>质检编号</th>
                                <th>批次编号</th>
                                <th>检验时间</th>
                                <th>检验类型</th>
                                <th>含水量%</th>
                                <th>皂苷含量%</th>
                                <th>检验结果</th>
                                <th>操作人</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${qualityChecks}" var="check">
                                <tr>
                                    <td>${check.inspectId}</td>
                                    <td>${check.batchNo}</td>
                                    <td>${check.inspectTime}</td>
                                    <td>${check.inspectType}</td>
                                    <td>${check.waterContent}</td>
                                    <td>${check.saponinContent}</td>
                                    <td>${check.result}</td>
                                    <td>${check.inspector}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 添加质检记录模态框 -->
        <div class="modal fade" id="addQualityCheckModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">添加质检记录</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addQualityCheckForm">
                            <div class="mb-3">
                                <label class="form-label">批次编号</label>
                                <select class="form-select" name="batchNo" required>
                                    <c:forEach items="${batchList}" var="batch">
                                        <option value="${batch.batchNo}">${batch.batchNo}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">检验类型</label>
                                <select class="form-select" name="inspectType" required>
                                    <option value="初质检">初质检</option>
                                    <option value="二次质检">二次质检</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">含水量(%)</label>
                                <input type="number" step="0.01" class="form-control" name="waterContent" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">皂苷含量(%)</label>
                                <input type="number" step="0.001" class="form-control" name="saponinContent" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">检验结果</label>
                                <select class="form-select" name="result" required>
                                    <option value="通过">通过</option>
                                    <option value="未通过">未通过</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">检测人ID</label>
                                <input type="number" class="form-control" name="inspector" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">检测时间</label>
                                <input type="datetime-local" class="form-control" name="inspectTime" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="submitAddQualityCheck()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%@ include file="../common/footer.jsp" %>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        var passRateLabels = ${passRateLabelsJson};
        var passRateData = ${passRateDataJson};
        var gradeLabels = ${gradeLabelsJson};
        var gradeData = ${gradeDataJson};



        function viewDetails(checkId) {
            // 实现查看详情功能
        }

        function reportIssue(checkId) {
            // 实现报告问题功能
        }

        function viewReport(checkId) {
            // 实现查看报告功能
        }

        function submitAddQualityCheck() {
            var form = $('#addQualityCheckForm');
            var data = {
                batchNo: form.find('select[name="batchNo"]').val(),
                inspectType: form.find('select[name="inspectType"]').val(),
                waterContent: form.find('input[name="waterContent"]').val(),
                saponinContent: form.find('input[name="saponinContent"]').val(),
                result: form.find('select[name="result"]').val(),
                inspector: form.find('input[name="inspector"]').val(),
                inspectTime: form.find('input[name="inspectTime"]').val().replace('T', ' ')
            };
            $.ajax({
                url: '${pageContext.request.contextPath}/processing/addQualityInspection',
                type: 'POST',
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function(res) {
                    $('#addQualityCheckModal').modal('hide');
                    location.reload();
                },
                error: function() {
                    alert('添加失败，请重试');
                }
            });
        }
    </script>
</body>
</html> 